<template>
	<view class="home">
		<custom-head-bar :foldState="foldState" id="customHeadBar"></custom-head-bar>
		<view class="wrapper">
			<view class="infoModel">
				<view class="left">免费配送</view>
				<navigator  url="/pages/order/order" class="right">
					<u-icon name="order" color="#ffa33a" size="24"></u-icon>
					<text>我的订单</text>
				</navigator>
			</view>
			<view class="scrollLayout">

				<view class="leftscroll">
					<scroll-view scroll-y="true" :scroll-top="leftScrollValue" class="sContent">
						<view class="navitem" :class="index==navIdx?'active':''" v-for="(item,index) in dataList" :key="item.id" @tap="clickNav(index)">
							{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="rightscroll">
					<navigator url="/pages/search/search" class="searchView">
						<u-icon name="search" size="24" color="#595959"></u-icon>
						搜索
					</navigator>
					<scroll-view @scroll="rightScrollEnt" :scroll-top="rightScrollValue" scroll-y="true" scroll-with-animation
						class="sContent">
						<view class="productView" v-for="(item,index) in dataList" :key="item.id">
							<u-sticky :customNavHeight="0" z-index="2">
								<view class="proTitle">
									{{item.name}}
								</view>
							</u-sticky>
							<view class="proContent">
								<view class="productitem" v-for="pro in item.proGroup" :key="pro._id">
									<product-item :item="pro"></product-item>
								</view>
							</view>

						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<car-layout v-if="buynum>0"></car-layout>
		
		
		<pro-detail-popup></pro-detail-popup>
		<pro-select-specs></pro-select-specs>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex"
	
	const goodsCloudObj = uniCloud.importObject("wanshop-mall-goods",{
		"customUI":true
	})
	export default {
		data() {
			return {
				navIdx: 0,
				leftScrollValue: 0,
				rightScrollValue: 0,
				leftHitArr: [],
				rightHitArr: [],
				dataList: [],
				}
		},
		async onLoad(){
			await this.getGoodsData();
			this.$nextTick(() => {
				this.getHeightArr();
			});
			
		},
		computed: {
			...mapGetters(["foldState","buynum","carsList"])
		},
		watch:{
			// carsList(nv,ov){
			
			// },
			carsList:{
				deep:true,
				handler(){
					this.setNumValue();	
				}
			}
		},
		methods: {
			...mapMutations(["setFoldState"]),
			
			async getGoodsData(){
				let res = await goodsCloudObj.getList();
				this.dataList = res
				this.setNumValue()
			},
			setNumValue(){
				this.dataList.forEach((item,index)=>{
					item.proGroup.forEach((child,idx)=>{
						// this.dataList[index].proGroup[idx].numvalue = 0
						this.$set(this.dataList[index].proGroup[idx],"numvalue",0)
					})
				})
				
				this.carsList.forEach((item1,index1)=>{
					this.dataList.forEach((item2,index2)=>{
						let index = item2.proGroup.findIndex(item3 =>{
							return item3._id == item1.goodsid
						})
						if(index >=0){
							this.$set(this.dataList[index2].proGroup[index],"numvalue",item1.numvalue)
						}
					})
				})
			},
			clickNav(index) {
				if (this.navIdx == index) return;
				this.navIdx = index;
				if (this.timeout) {
					clearTimeout(this.timeout)
				}
				this.timeout = setTimeout(() => {
					this.leftScrollValue = this.leftHitArr[index];
					this.rightScrollValue = this.rightHitArr[index];
				}, 100)
			},

			getHeightArr() {
				let customHeadBar;
				let selectorQuery = uni.createSelectorQuery();


				selectorQuery.select("#customHeadBar").boundingClientRect(rect => {
					customHeadBar = rect.height;
				}).exec()

				selectorQuery.selectAll(".navitem").boundingClientRect(rects => {
					this.leftHitArr = rects.map(item => item.top - customHeadBar - 40)
				}).exec()
				//右侧滚到区域的节点组
				selectorQuery.selectAll(".productView").boundingClientRect(rects => {
					this.rightHitArr = rects.map(item => item.top - customHeadBar - 40)
				}).exec()

			},
			// 监测右侧滚动条的变化并联动左侧
			rightScrollEnt(e) {
				let scrollTop = Math.ceil(e.detail.scrollTop);
				let idx = this.rightHitArr.findIndex((value, index, arr) => scrollTop >= value && scrollTop < arr[index + 1])
				this.navIdx = idx;
				this.leftScrollValue = this.leftHitArr[idx];
				if (scrollTop < 300) {
					this.setFoldState(false)
					console.log(this.foldState);
				}
				if (scrollTop > 400) {
					this.setFoldState(true)
					console.log(this.foldState);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.wrapper {
			flex: 1;
			background: #ffffff;
			border-radius: 10px 10px 0 0;
			margin-top: -10px;
			position: relative;
			z-index: 2;
			overflow: hidden;

			.infoModel {
				@include flex-box();
				height: 44px;
				background: #fff;
				padding: 0 30rpx;
				font-size: 32rpx;

				.right {
					@include flex-box();
				}
			}

			.scrollLayout {
				height: calc(100% - 88rpx);
				@include flex-box();

				.leftscroll {
					height: 100%;
					width: 180rpx;
					border-right: 1rpx solid #d3d3d3;
					background-color: #f8f8f8;

					.navitem {
						font-size: 30rpx;
						padding-left: 30rpx;
						line-height: 100rpx;
						color: #3e3e3e;
						position: relative;

						&.active {
							color: #222222;
							background: #fff;

							&::after {
								content: "";
								width: 6rpx;
								height: 30rpx;
								background: #ffaa00;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
							}


						}
					}
				}

				.rightscroll {
					height: 100%;
					flex: 1;
					position: relative;

					.searchView {
						position: absolute;
						top: 0;
						right: 30rpx;
						z-index: 3;
						@include flex-box();
						height: 88rpx;
					}

					.productView {
						padding: 0 30rpx;

						.proTitle {
							line-height: 88rpx;
							font-size: 30rpx;
							background: #fff;
						}
					}
				}

				.sContent {
					height: 100%;
				}
			}
		}
	}
</style>